/*
 * Copyright 2022 Nightingale Team
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */
import React, { useState, useEffect, useContext } from 'react';
import { Link, useHistory } from 'react-router-dom';
import { Button, Spin, Divider, Card, Space } from 'antd';
import { RollbackOutlined, CopyOutlined } from '@ant-design/icons';
import _ from 'lodash';
import moment from 'moment';
import { useTranslation } from 'react-i18next';
import PageLayout from '@/components/pageLayout';
import request from '@/utils/request';
import api from '@/utils/api';
import Editor from './editor';
import { Tpl } from './interface';
import { CommonStateContext } from '@/App';
import { copyToClipBoard } from '@/utils';

const Detail = (props: any) => {
  const history = useHistory();
  const id = _.get(props, 'match.params.id');
  const { businessGroup } = useContext(CommonStateContext);
  const curBusiId = businessGroup.id!;
  const { t } = useTranslation('common');
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState({} as Tpl);

  useEffect(() => {
    if (id) {
      setLoading(true);
      request(`${api.tasktpl(curBusiId)}/${id}`)
        .then((data) => {
          const { dat } = data;
          setData({
            ...dat.tpl,
            hosts: dat.hosts,
            grp: dat.grp,
          });
        })
        .finally(() => {
          setLoading(false);
        });
    }
  }, [id, curBusiId]);

  return (
    <PageLayout
      title={
        <>
          <RollbackOutlined className='back' onClick={() => history.push('/job-tpls')} data-oid='p0kuzwk' />
          {t('tpl')}
        </>
      }
      data-oid='w4:so8t'
    >
      <div className='p2' data-oid='f5rjoy5'>
        <Card title={t('common:btn.detail')} data-oid='_7zrxl2'>
          <Spin spinning={loading} data-oid='nt11u51'>
            <div className='job-task-table' data-oid='ji-2d13'>
              <div className='ant-table ant-table-default ant-table-bordered' data-oid='se560:m'>
                <div className='ant-table-content' data-oid='h:540al'>
                  <div className='ant-table-body' data-oid='gl4cvxe'>
                    <table data-oid='e.9i_ni'>
                      <colgroup data-oid='yatqcz:'>
                        <col style={{ width: 100, minWidth: 100 }} data-oid='jdonpe_' />
                        <col data-oid='2frpbxi' />
                      </colgroup>
                      <tbody className='ant-table-tbody' data-oid='uer_rw9'>
                        <tr className='ant-table-row ant-table-row-level-0' data-oid='tnjq1o2'>
                          <td data-oid='wd_4r5x'>{t('task.title')}</td>
                          <td data-oid='lv9.d:c'>{data.title}</td>
                        </tr>
                        <tr className='ant-table-row ant-table-row-level-0' data-oid='rvnd_j_'>
                          <td data-oid='_-lbmni'>{t('tpl.creator')}</td>
                          <td data-oid='cgkya81'>{data.create_by}</td>
                        </tr>
                        <tr className='ant-table-row ant-table-row-level-0' data-oid='6dk6asg'>
                          <td data-oid='08mpub8'>{t('tpl.last_updated')}</td>
                          <td data-oid='ecyhe-u'>{moment.unix(data.update_at).format('YYYY-MM-DD HH:mm:ss')}</td>
                        </tr>
                        <tr className='ant-table-row ant-table-row-level-0' data-oid='nuaw4u:'>
                          <td data-oid='ncob97k'>{t('task.control.params')}</td>
                          <td data-oid='hn.iq5d'>
                            {t('task.account')}：{data.account}
                            <Divider type='vertical' data-oid='1dg4i1s' />
                            {t('task.batch')}：{data.batch}
                            <Divider type='vertical' data-oid='m_f9n0:' />
                            {t('task.tolerance')}：{data.tolerance}
                            <Divider type='vertical' data-oid='3ku.y6g' />
                            {t('task.timeout')}：{data.timeout}
                          </td>
                        </tr>
                        <tr className='ant-table-row ant-table-row-level-0' data-oid='9udbp-6'>
                          <td data-oid='2qtehzt'>
                            <div style={{ height: '100%' }} data-oid='qfl4nft'>
                              {t('task.script')}
                            </div>
                          </td>
                          <td data-oid='.k6ovno'>
                            <Editor value={data.script} readOnly height='200px' data-oid='i.g4kon' />
                          </td>
                        </tr>
                        <tr className='ant-table-row ant-table-row-level-0' data-oid='fslxpyr'>
                          <td data-oid='5a13_rg'>{t('task.script.args')}</td>
                          <td data-oid='m44jo8s'>{data.args}</td>
                        </tr>
                        <tr className='ant-table-row ant-table-row-level-0' data-oid='5q4.ofm'>
                          <td data-oid='.9vsii.'>{t('task.pause')}</td>
                          <td data-oid='y5tlj-b'>{data.pause}</td>
                        </tr>
                        <tr className='ant-table-row ant-table-row-level-0' data-oid='r9s7bh5'>
                          <td data-oid='w7zo_w0'>{t('task.host.list')}</td>
                          <td data-oid='3njbj:.'>
                            {_.map(data.hosts, (host) => {
                              return (
                                <div key={host} data-oid='wi1eal5'>
                                  {host}
                                </div>
                              );
                            })}
                          </td>
                        </tr>
                        <tr className='ant-table-row ant-table-row-level-0' data-oid='lsml.v9'>
                          <td data-oid=':h.ffom'>{t('tpl.callback')}</td>
                          <td data-oid='8xhulu2'>
                            <Space data-oid='k13up4v'>
                              <span data-oid='qrfk85x'>{`\${ibex}/${id}`}</span>
                              <CopyOutlined
                                onClick={() => {
                                  copyToClipBoard(`\${ibex}/${id}`);
                                }}
                                data-oid='vsd-928'
                              />
                            </Space>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <div style={{ marginTop: 10 }} data-oid='1tfr69q'>
              <Link to={{ pathname: `/job-tpls/${id}/modify` }} data-oid=':u6zyml'>
                <Button type='primary' style={{ marginRight: 10 }} data-oid='sjn4tkl'>
                  {t('tpl.modify')}
                </Button>
              </Link>
              <Link to={{ pathname: `/job-tpls/add/task`, search: `tpl=${id}` }} data-oid='rh1smc6'>
                <Button type='primary' data-oid='goxqi_l'>
                  {t('tpl.create.task')}
                </Button>
              </Link>
            </div>
          </Spin>
        </Card>
      </div>
    </PageLayout>
  );
};

export default Detail;
